/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    InteractionManager
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import MessageQueue from '../lib/plugins/MessageQueue';
import userService from '../lib/services/userService';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class Qun extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.clubList = [];
        this.state = {
            list:ds.cloneWithRows(this.clubList),
            token:this.props.navigation.state.params.token,
        }; 
    }
    componentDidMount() {
        var $this = this;
        InteractionManager.runAfterInteractions(() => {
            $this.getData();
        });
    }

    renderLabel(str){
        var list = str.split(',');
        // alert(JSON.stringify(list))
        return(
            list.map((item,i)=>{
                return(
                    <View key={i}>
                        <View style={{borderColor:'rgb(79,145,237)',borderWidth:1,borderRadius:3,padding:3,marginRight:10,marginBottom:10}}>
                            <Text style={{color:'rgb(79,145,237)'}}>{item}</Text>
                        </View>
                    </View>
                )
            })
        )
    }

    renderListItem(rowdata,sectionID,rowID){
        var id = rowdata.id;
        // alert(JSON.stringify(rowdata))
        // if(rowdata.distance){
        //     var distance = rowdata.distance.toFixed(2) || '0.00';
        // }
        // http://test.520m.com.cn/upload/thumb/group_5926539a1c2c2.png   小图
        // http://test.520m.com.cn/upload/common/group_5926539a1c2c2.png   大图
        // <View>
        //     <Text>{rowdata.distance.match(/^\d+(?:\.\d{0,2})?/)+'km'}</Text>
        // </View>
        return(
            <TouchableOpacity onPress={()=>this.goClubDetails(id)}>
                <View style={styles.itemBox}>
                    <View style={styles.itemTitle}>
                        <View style={{flex:1,alignItems:'center'}}>
                            <Text>{rowdata.group_location}</Text>
                        </View>
                        <View style={{alignItems:'center',padding:2,width:60,borderColor:'rgb(79,145,237)',borderWidth:1,borderRadius:3}}>
                            <Text style={{color:'rgb(79,145,237)'}}>{rowdata.user_num}人</Text>
                        </View>
                    </View>
                    <View style={{flexDirection:'row',paddingTop:5}}>
                        <View style={{borderRadius:5,marginRight:10}}>
                            <Image source={{uri:'http://test.520m.com.cn/upload/thumb/'+ rowdata.group_img}} style={{resizeMode: 'stretch',borderRadius:5,width:80,height:80}}>
                                <ImageWrapper style={{position:'absolute',right:0,bottom:0}} icon={'iconClub'} width={40} height={40}/>
                            </Image>
                        </View>
                        <View>
                            <View>
                                <Text style={{fontSize:16}}>{rowdata.name}</Text>
                            </View>
                            <View>
                                <Text style={{color:'#a1a1a1'}}>{rowdata.introduce}</Text>
                            </View>
                            {rowdata.label?<View style={{flexDirection:'row',flexWrap:'wrap'}}>{this.renderLabel(rowdata.label)}</View>:<View></View>}
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'俱乐部'} 
                    leftPress={()=>this.goBack()}
                    rightText={'创建'}
                    rightTextPress={()=>this.goCreateClub()}
                    rightTextStyle={{color:'#fff',fontSize:16}}/> 
                <ListView
                    style={{borderBottomWidth:1,borderBottomColor:'#ccc',flex:1}}
                    dataSource={this.state.list}
                    enableEmptySections={true}
                    renderRow={(rowdata,sectionID,rowID) => this.renderListItem(rowdata,sectionID,rowID)}
                    onEndReachedThreshold={10}/>            
                
            </View>
        )

    }

    goCreateClub(){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('CreateClub',{token:$this.state.token,backCreat:()=>{
            $this.getData();
        }});
    }

    goBack(){
        this.props.navigation.goBack();
    }

    getData(){
        var $this = this;
        // alert(this.state.token)
        userService.myGroup(function(data){
            // alert(JSON.stringify(data))
            if(data.code==10000){
                $this.clubList = data.data;
                $this.setState({
                    list:$this.state.list.cloneWithRows($this.clubList),
                })
            }
        },$this.state.token)
    }

    goClubDetails(clubId){
        var $this = this;
        const {navigate } = this.props.navigation;
        // alert(clubId.rowdata)
        navigate('ClubDetails',{clubId:clubId,token:$this.state.token,reload:()=>{
            $this.getData();
        }});
    }

}


const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    itemBox:{
        marginTop:5,
        marginLeft:5,
        marginRight:5,
        borderWidth:1,
        borderColor:'#ddd',
        borderRadius:3,
        padding:5,
        backgroundColor:'#fff'
    },
    itemTitle:{
        flexDirection:'row',
        alignItems:'center',
        borderBottomWidth:1,
        borderBottomColor:'#ddd',
        height:40
    }
    
    
});